<template>
    <view class="daren">
        <view class="daren-banner-box">
            <view class="talentsub-background"></view>
            <view class="margin-tb-sm">
                <swiper :indicator-dots="false" :autoplay="true" interval="5000" duration="200" class="daren-banner-swiper">
                    <swiper-item v-for="(item, index) in banner" :key="index">
                        <image :src="item.image" class="daren-slide-image" mode="widthFix" />
                        <view class="talentsub-text">绵阳师范学院</view>
                        <view class="talentsub-div">
                            <view class="talentsub-num">
                                <view class="number">NEWS</view>
                                <view class="danpin">新闻</view>
                            </view>
                            <image src="http://yiban.likecy.cn/yb.png" mode=""></image>
                        </view>
                    </swiper-item>
                </swiper>
            </view>
        </view>

        <!-- 本周新作 -->
        <view class="week-new">
            <view class="week-title">推荐栏目</view>
            <view class="week-container">
                <scroll-view class="swiper-wrapper" :scroll-x="true" :scroll-with-animation="true">
                    <view class="new-article" v-for="(item, index) in channelList" :key="index" :data-channelid="item.id" @click="gotowhere">
                        <image :src="item.image" class="article-img" mode="widthFix"></image>
                        
                       <view class="article-info">
                           
							<view class="article-title"><text class="text-bold">{{item.name}}</text></view>
                      
                        </view>
                    </view>
                </scroll-view>
            </view>
        </view>

        <!-- 大家都在逛 -->
        <view class="wandering">
			
            <view class="wandering-title">分类栏目</view>
			
			<scroll-view scroll-x class="bg-white nav" scroll-with-animation :scroll-left="scrollLeft">
				<view class="cu-item" :class="index==TabCur?'text-green cur':''" v-for="(item,index) in channelList" :key="index" @tap="tabSelect" :data-id='index' :data-channel="item.id">
					{{item.name}}
				</view>
			</scroll-view>
			   <view class="wandering-content">
			<view class="cu-card dynamic margin-top-sm margin-bottom-sm" v-for="(one,index) in topicList" :key="index">
				<view class="cu-item shadow " @click="toDetail(one.channel.id,one.id)" >
						
				<view class="padding">
				
						<view class="round text-green" >{{one.title}}</view>
								<view class="text-right">
									<view class="huati text-orange text-bold">#{{one.channel.name}}#</view>
								</view>
								<view class="grid ">
									<view class="round cu-tag bg-blue light">{{one.username}}</view>
									<view class="padding-sm">
										To<text class="cuIcon-like line-red text-bold"></text>
									</view>
									<view class="">
										<view class="round cu-tag bg-pink light text-cut">{{one.sendto}}</view>
									</view>
								</view>	
			
					</view>
				
					<view class="margin-sm" >
					
					<text class=" textforcut text-content">
						{{one.content}}
					</text>
					
					
				
					<view class="flex justify-end  margin-top">
						<view class="right">
							<view class="cu-tag round bg-green sm">{{one.school}}</view>
						</view>
						<view class="right">
							<view class="round cu-tag bg-yellow sm">{{one.class}}</view>
						</view>				
					</view>
					<view class="flex justify-end">
					  <text class="right cuIcon-link">浏览:{{one.views}}</text>
					  <text class="right cuIcon-new">评论:{{one.comments}}</text>
					  <view class="right text-blue">{{one.create_date}}</view>
					</view>
					
					 
						<view class="text-right">
								<view class="text-gray text-sm">{{one.createtime|timeFormat}}</view>
						</view>
				</view>
			
				
				</view>
			</view>
		   </view> 
		</view>
		
		
		
		
    <!--    <view class="wandering-content">

                <view class="wandering-div" v-for="(item, index) in 10" :key="index">
                    <view class="wandering-top">
                        <image src="http://img.haodanku.com/Fp1vvxnFOZMM-5rLH-DADw3z2EDe" mode="widthFix" class="wandering-image"></image>
                        <view class="wandering-label">
                            <text class="label-text">好物/</text>
                            <text class="label-num">17单品</text>
                        </view>
                    </view>
                    <view class="wandering-desc">
                        <view class="wandering-div-title"><text class="">低成本的收纳好物，让小屋拥有大空间</text></view>
                        <view class="wandering-div-subtitle">
                            <text class="">嗨！我是小编你平时是否有这样的烦恼每到换季，或是搬家整理的时候总能发现杂物特别多，而且很占空间显得家里乱糟糟的</text>
                        </view>
                    </view>
                </view>
            </view> -->
        </view>
    </view>
</template>

<script>
	var _self;
export default {
    data() {
        return {
            banner: [],
			TabCur: 0,
			scrollLeft: 0,
			channelList:[],
			topicList:[],
			count:[]
        };
    },
    onLoad() {
		_self =this;
		this.getchannel();
		this.getList(1);
		this.getbannerImg();
	},
    methods: {
		tabSelect(e) {
			var channel =e.currentTarget.dataset.channel;
			this.TabCur = e.currentTarget.dataset.id;
			this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60
			this.topicList =[];
			this.getList(channel);
		},
		getList(channel) {
			this.$http.get('addons/cms/wxapp.archives/index?channel=' +channel)
				.then(res => {
					_self.topicList = res.data.data;
					_self.count = res.data.msg;
					console.log(res);
				})
				.catch(err => {});
		},
		getbannerImg(){
			this.$http.get('api/home/getSwiperListforNews')
				.then(res => {
					console.log(res);
				_self.banner = res.data.data;
				})
				.catch(err => {});
		},
		
		getchannel(){
			
			this.$http.post('addons/cms/api/channel',{apikey:'chenyun666'}).then(res => {
						console.log(res);
							_self.channelList = res.data.data;
					})
					.catch(err => {});
		},
		jumpToChannel(tourl){
			
		},
		gotowhere(e){
			var channelid = e.currentTarget.dataset.channelid;
			// this.jumpToChannel(');
			 uni.navigateTo({
				url:'../home/channellist/list?channel='+channelid
			});
		},
		toDetail(channel,archivesid){
			uni.navigateTo({
				url: '/pages/home/channellist/detal?channel='+channel+'&id='+archivesid
			});
		},
	},
	filters: {
	
		timeFormat: function(arg, type = 'YYYY-MM-DD h:m:s') {
	
			if (arg.toString().length == 10) {
				arg = arg * 1000;
				//如果date为13位不需要乘1000
				//[js时间戳长度是13位]，php，java等时间戳长度为10位
			}
			var date = new Date(arg)
			var year = date.getFullYear(); //获取年
			var mouth = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1); //月
			var day = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate()); //日
			var hour = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()); //时
			var minute = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()); //分
			var second = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds()); //秒
			if (type == 'YYYY-MM-DD h:m:s') {
				return year + '-' + mouth + '-' + day + ' ' + hour + ':' + minute + ':' + second;
			}
	
		},
		imagesToArray: function(images) {
		   var strs= new Array(); //定义一数组 
			if (images.length == 1) {
				strs[0] = images;
				return strs;
				//如果date为13位不需要乘1000
				//[js时间戳长度是13位]，php，java等时间戳长度为10位
			}else{
				strs=images.split(","); //字符分割 
				return strs;
			}
			
			
		}
	
	}
};
</script>

<style>
page {
    background: #f2f2f2;
}
.textforcut
    { 
    overflow : hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
	}
	.henflex {
		display: flex;
		flex-flow: row;
		padding: 15upx;
	}
.daren {
    width: 100%;
    box-sizing: border-box;
}
.daren-banner-box {
    width: 100%;
    box-sizing: border-box;
}
.daren-banner-box .margin-tb-sm {
    margin-top: 20upx;
    padding: 0 20upx;
}
.daren-banner-swiper {
    width: 100%;
    height: 400upx;
    border-radius: 12upx;
    overflow: hidden;
    transform: translateY(0);
}

.daren-slide-image {
    width: 100%;
    height: 260upx;
    display: block;
    max-height: 260upx !important;
    min-height: 260upx !important;
    transform: translate3d(0, 0, 0);
    margin-left: 10upx;
    margin-right: 10upx;
    border-top-left-radius: 12upx;
    border-top-right-radius: 12upx;
}

.daren-banner-swiper .talentsub-text {
    display: block;
    background: #ffffff;
    color: #333333;
    padding: 1rem;
    font-size: 30upx;
    border-bottom-left-radius: 12upx;
    border-bottom-right-radius: 12upx;
    margin-left: 10upx;
    margin-right: 10upx;
}
.talentsub-div {
    position: absolute;
    bottom: 30upx;
    right: 20upx;
    width: 140upx;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding: 8upx;
    padding-top: 0;
    background: rgba(250, 250, 250, 0.9);
    border-top-left-radius: 6px;
    border-top-right-radius: 30px;
}
.talentsub-num {
    color: #809def;
    padding-top: 20upx;
    padding-bottom: 10upx;
}

.talentsub-num .number {
    text-align: center;
    font-size: 35upx;
}
.talentsub-num .danpin {
    font-size: 30upx;
    display: block;
    text-align: center;
}

.talentsub-div image {
    width: 120upx;
    height: 120upx;
    border-radius: 6px;
}
.talentsub-background {
    position: absolute;
    top: 0;
    width: 100%;
    height: 140px;
    background-image: url('http://img.fqapps.com/FqkeWFSpNCpKEiM6Qgm_sabSD5Ag');
}
.week-title {
    font-size: 36upx;
    padding-left: 38upx;
    padding-top: 0upx;
    padding-bottom: 10upx;
    color: #484848;
}

.week-new {
    width: 100%;
    max-width: 100%;
}

.week-container {
    white-space: nowrap;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
    list-style: none;
    padding: 0;
    z-index: 1;
    padding-top: 0upx;
    padding-left: 25upx;
    padding-right: 25upx;
    border-radius: 12upx;
}

.week-container .swiper-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 1;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-transition-property: -webkit-transform;
    transition-property: -webkit-transform;
    -o-transition-property: transform;
    transition-property: transform;
    transition-property: transform, -webkit-transform;
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
    transition-timing-function: ease-out;
    margin: 0 auto;
    border-radius: 12upx;
}
.week-container .swiper-wrapper .new-article {
    display: inline-block;
    background: #ffffff;
    border-radius: 12upx;
    -webkit-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    width: 70%;
    height: 100%;
    position: relative;
    transition-property: transform;
    transform: translate3d(0, 0, 0);
    margin-right: 20upx;
}
.week-container .swiper-wrapper .new-article .article-img {
    width: 100%;
    max-height: 300upx;
    display: block;
    border-top-left-radius: 12upx;
    border-top-right-radius: 12upx;
}
.week-container .swiper-wrapper .new-article .article-title {
    font-size: 30upx;
    color: #484848;
    display: block;
    padding-top: 16upx;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    padding-left: 16upx;
}
.week-container .swiper-wrapper .new-article .article-info {
    display: flex;
    align-items: center;
    padding: 16upx;
}
.week-container .swiper-wrapper .new-article .info-img {
    width: 45upx;
    height: 45upx;
    border-radius: 100%;
    margin-right: 16upx;
}
.week-container .swiper-wrapper .new-article .info-name {
    font-size: 30upx;
    color: #666;
}
.week-container .swiper-wrapper .new-article .detail {
    position: absolute;
    right: 16upx;
    font-size: 26upx;
    color: #666;
}
/*大家都在逛*/
.wandering-title {
    font-size: 36upx;
    padding-left: 38upx;
    padding-top: 20upx;
    padding-bottom: 10upx;
    color: #484848;
}
.wandering-content {
    padding: 25upx;
}
.wandering-content .wandering-div {
    padding: 20upx;
    margin-bottom: 30upx;
    border-radius: 12upx;
    background: #ffffff;
}
.wandering-content .wandering-div .wandering-top {
    position: relative;
    margin-bottom: 10upx;
}
.wandering-content .wandering-div .wandering-top .wandering-image {
    width: 100%;
    height: 208upx !important;
    display: block;
    border-radius: 10upx;
}
.wandering-content .wandering-div .wandering-top .wandering-label {
    position: absolute;
    bottom: -20upx;
    left: 20upx;
    padding: 8upx 20upx;
    background: #fc9090;
    color: #ffffff;
    border-radius: 8upx;
}
.wandering-content .wandering-div .wandering-top .wandering-label .label-num {
    font-size: 28upx;
}

.wandering-content .wandering-div .wandering-div-title {
    display: block;
    color: #484848;
    padding-top: 25upx;
    padding-bottom: 20upx;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}
.wandering-content .wandering-div .wandering-div-subtitle {
    font-size: 26upx;
    color: #999999;
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
</style>
